import React, { MouseEvent } from "react";
// import logo from './logo.svg';
// import './App.css';
import Home from "./pages/home/Home";
import Counter from "./pages/counter/Counter";
import EventCom from "./pages/event/Event";
import Hoc from "./components/Hoc";
import Controlled from './pages/controlled/Controlled'
// plugins
import { request } from "./utils/http";

interface IProps {}
interface IState {
  count: number;
}
class App extends React.Component<IProps, IState> {
  state: IState = {
    count: 0,
  };
  async componentDidMount() {
    let res = await request({
      url: "http://www.baidu.com",
      type: "GET",
    });
    console.log(res);
  }
  inc = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };
  dec = () => {
    this.setState({
      count: this.state.count - 1,
    });
  };
  handelEmit = (e: MouseEvent) => {
    console.log(e.target);
    console.log(e.currentTarget);
  };
  render() {
    const { count } = this.state;
    return (
      <div className="App">
        <Home name={"传值"} />
        <hr />
        <Counter count={count} increment={this.inc} decrement={this.dec} />
        <hr />
        <Hoc />
        <hr />
        <EventCom emit={this.handelEmit}>
          <span>插槽被</span>
        </EventCom>
        <hr/>
        <Controlled/>
      </div>
    );
  }
}

export default App;
